<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="modalTitle"
    :default-fullscreen="false"
    :show-ok-btn="false"
  >
    <Description
      size="middle"
      title="文章"
      :bordered="false"
      :column="1"
      :data="article"
      :schema="articleBasicInfoSchema"
    />
    <a-divider />
    <BasicTable @register="registerArticleLogsTable">
      <template #opRender="{ record }">
        <Tag v-if="record.op === 0 || record.op === '0'"> 保存草稿 </Tag>
        <Tag v-else-if="record.op === 1 || record.op === '1'"> 提交审核 </Tag>
        <Tag v-else-if="record.op === 2 || record.op === '2'"> 审核通过 </Tag>
        <Tag v-else-if="record.op === 3 || record.op === '3'"> 审核未通过 </Tag>
        <Tag v-else-if="record.op === 4 || record.op === '4'"> 发布 </Tag>
        <Tag v-else-if="record.op === 5 || record.op === '5'"> 发布撤回 </Tag>
        <Tag v-else-if="record.op === 6 || record.op === '6'"> 设置标签 </Tag>
        <Tag v-else-if="record.op === 7 || record.op === '7'"> 取消标签 </Tag>
        <Tag v-else-if="record.op === 9 || record.op === '9'"> 删除 </Tag>
        <Tag v-else-if="record.op === 10 || record.op === '10'"> 敏感词替换 </Tag>
        <Tag v-else-if="record.op === 12 || record.op === '12'"> 二审通过 </Tag>
        <Tag v-else-if="record.op === 13 || record.op === '13'"> 二审未通过 </Tag>
        <Tag v-else>
          {{ record.op }}
        </Tag>
      </template>
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, unref } from 'vue';
  import { Description } from '/@/components/Description/index';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { Divider, Tag } from 'ant-design-vue';

  import { useMessage } from '/@/hooks/web/useMessage';
  import { OperationTypeEnum } from '/@/enums/appEnum';
  // const { createMessage, createErrorModal } = useMessage();
  const { createMessage } = useMessage();

  import {
    articleBasicInfoSchema,
    articlesLogsTableColumns,
    logsTableTestData,
  } from './articles.data';
  import { getArticleLogs } from '/@/api/cms/article'; // api

  export default defineComponent({
    name: 'CmsArticleLogs',
    components: { Description, BasicTable, [Divider.name]: Divider, BasicModal, Tag },
    emits: ['register'],
    setup() {
      //弹出窗口界面是新增数据、修改数据还是重新处理数据；根据传递过来的参数进行判断
      const op = ref(OperationTypeEnum.UN_KNOWN);
      const moduleName = ref<string>('模块名称');
      //标题--根据传入的模块名称+操作类型组合得到
      const modalTitle = ref('标题');
      const article = reactive({ id: '', title: '' });

      const [registerArticleLogsTable, { setTableData }] = useTable({
        title: '日志记录',
        // dataSource: logsTableTestData,
        columns: articlesLogsTableColumns,
        pagination: false,
        showIndexColumn: false,
      });

      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        //根据传递过来的参数获取对应的操作，操作不同所对应的界面不同
        //接收父组件传递的数据
        if (data?.op) {
          //判断是否传入op属性
          op.value = data.op;
        }
        if (data?.dataId) {
          article.id = data.dataId;
          getLogs();
        }
        if (data?.articleTitle) {
          article.title = data.articleTitle;
        }
        if (data?.moduleName) {
          moduleName.value = data.moduleName;
        }
        if (moduleName) {
          modalTitle.value = unref(moduleName);
        }
        if (op.value != OperationTypeEnum.UN_KNOWN && op.value != OperationTypeEnum.CUSTOME) {
          modalTitle.value += '--' + op.value;
        }

        setModalProps({ confirmLoading: false });

        if (op.value == OperationTypeEnum.LOG) {
        }
      });

      function getLogs() {
        // setTableData(logsTableTestData);
        getArticleLogs({ id: article.id })
          .then((res) => {
            console.log('res', res);
            setTableData(
              res.sort((a, b) => Date.parse(new Date(b.tm)) - Date.parse(new Date(a.tm))),
            );
          })
          .catch((ex) => {
            console.log('catch ', ex);
            createMessage.error(ex.msg);
          });
      }

      return {
        op,
        moduleName,
        modalTitle,
        article,
        articleBasicInfoSchema,
        registerModal,
        registerArticleLogsTable,
        getLogs,
      };
    },
    // watch: {
    //   article: function (newVal, oldVal) {
    //     console.log('watch article', newVal);
    //     this.getLogs();
    //   },
    // },
  });
</script>
<style scoped lang="less"></style>
